form wizard not working after duplicating steps

form wizard not working after duplicating steps

Hi,

I had a problem with the jquery formwizard plugin, when trying to add new steps by this code creates error in a sense that I can't click next, because the validate plugin validates the next form, even though the user didn't go to the next step yet.

Then all the other ajax drop down forms won't function properly in the new duplicated steps eventhough I used the .live() function

What's wrong with my code?

About form wizard, it divides your one form into alot of parts using span id as the name of the separate page and the class = step or step_submit as next step or submit page

  1. <div id="frmWrapper">
  2. <form id="signupForm" method="post" action="" class="bbq">
  3.     <div id="fieldWrapper">
  4.    
  5.      <span class="stepinfo">Registration</span><br />
  6.     <span class="step" id="personal">
  7.     <span class="title">Step 1 - Personal Information</span><br />
  8.         <?php
  9.         /*** create the form token ***/
  10.         $form_token = uniqid();
  11.        
  12.         /*** add the form token to the session ***/
  13.         $_SESSION['form_token'] = $form_token;
  14.         $x = 0;
  15.         ?>
  16.         <input type="hidden" name="token" id="token" value="<?php echo $form_token;?>"/>
  17.         <input type="hidden" name="counter" id="counter" value="<?php echo $x ?>" />
  18.       <label for="firstname">First name*</label><br/>
  19.       <input class="required" name="firstname" id="firstname" /><br />
  20.       <label for="middlename">Middle name*</label><br />
  21.       <input class="required" name="middlename" id="middlename" /><br />
  22.       <label for="lastname">Last name*</label><br />
  23.       <input class="required" name="lastname" id="lastname"><br/>
  24.       <label for="homeaddress">Home Address*</label><br/>
  25.       <textarea class="required" name="homeaddress" id="homeaddress" cols="45" rows="3"></textarea><br />
  26.       <label for="telephone">Telephone*</label><br />
  27.       <input class="required" maxlength="14" name="telephone" id="telephone"><br/> 
  28.       <label for="birthday">Birthday*</label><br/>
  29.       <input class="required date" name="birthday" id="birthday"><br />
  30.       <label for="birthplace">Birthplace*</label><br/>
  31.       <input class="required" name="birthplace" id="birthplace" /><br/>  
  32.       <label for="oaddress">Office Address</label><br />
  33.       <textarea class="" name="oaddress" id="oaddress" cols="45" rows="3"></textarea><br />
  34.       <label for="otel">Office Telephone</label><br />
  35.       <input class="" name="otel" id="otel" /><br />   
  36.       <label for="ofax">Office Fax</label><br />
  37.       <input class="" name="ofax" id="ofax" /><br/>   
  38.       <label for="email">Email*</label><br />
  39.       <input class="required email" name="email" id="email" /><br/>
  40.       <label for="password">Password*</label><br />
  41.       <input type="password" class="required password" maxlength="15" name="password" id="password" /><br />  
  42.       <label for="cpassword">Confirm Password*</label><br />
  43.       <input type="password" class="required password" equalTo="#password" name="cpassword" maxlength="15" id="cpassword" /><br />      
  44.     </span>
  45.     <span id="vehicle" class="step">
  46.         <span class="title">Step 2 - Vehicle Information</span><br />
  47.         <!--token data-->
  48.         <span id="tokendata"></span>
  49.     <label for="regname">Registered Name*</label>
  50.     <br />
  51.         <input class="required" name="regname[]" id="regname" value="" /><br/>
  52.     <label for="regaddress">Registered Address*</label><br />
  53.         <textarea class="required" name="regaddress[]" id="regaddress" cols="45" rows="3"></textarea><br />
  54.     <label for="year">Year Manufactured:*</label><br />
  55.          <select name="year[]" id="year" class="required">
  56.             <option value="">Select a Year</option>
  57.             <?php foreach ($qyear as $key =>$list) {?>
  58.             <option value="<?php echo $list['year']?>"><?php echo $list['year'] ?></option>
  59.             <?php }  ?>
  60.         </select><br/>
  61.     <label for="brand">Brand:*</label><br />                        
  62.         <select name="brand[]" id="brand" class="required">
  63.               <option value="">Select a Brand</option>
  64.         </select><br/>
  65.     <label for="model">Model:*</label><br />
  66.     <input type="hidden" id="carType" name="carType[]" />                       
  67.         <select name="model[]" id="model" class="required">
  68.             <option value="">Select a Model</option>
  69.         </select><br/>
  70.     <label for="platenum">Plate Number*</label><br/>
  71.            <input type="text" name="platenum[]" id="platenum" class="required" maxlength="7"/><br/>
  72.     <label for="motornum">Motor Number*</label><br/>
  73.         <input type="text" name="motornum[]" id="motornum" class="required" maxlength="13"/><br />
  74.     <label for="chassisnum">Chassis Number*</label><br/>
  75.         <input type="text" name="chassisnum[]" id="chassisnum" class="required" maxlength="17"/><br />
  76.     <label for="mvfnum">MvFile Number*</label><br/>
  77.         <input type="text" name="mvfnum[]" id="mvfnum" class="required" maxlength="16"/><br />
  78.     <label for="color">Color*</label><br/>
  79.         <input type="text" name="color[]" id="color" class="required"/><br />
  80.     <label for="aog">Acts of God*<img src="<?php echo base_url()?>images/question.jpg"  title="If yes, will cover damages from disasters such as floods, hurricane, etc" class="betipped" style="color:#009;" /></label><br/>
  81.         <select name="aog[]" id="aog" class="required">
  82.             <option value="">&nbsp;</option>
  83.             <option value="yes">Yes</option>
  84.             <option value="no">No</option>           
  85.           </select><br/>
  86.       <!--<span id="bank"></span>-->
  87.       <label for="tpl">TPL*<img src="<?php echo base_url()?>images/question.jpg" title="If there is an existing TPL, clicking yes,&lt;br/&gt; will prompt Insurance Experts to remind you of your TPL expiration" class="betipped" /></label><br/>
  88.               <select name="tpl[]" id="tpl" class="required">
  89.                 <option value="">&nbsp;</option>
  90.                 <option value="yes">Yes</option>
  91.                 <option value="no">No</option>           
  92.               </select><br/>
  93.       <label for="delivery">Delivery*<img src="<?php echo base_url()?>images/question.jpg" title="Included in GMA: Metro Manila, Laguna, Cavite, Rizal, Bulacan, Pampanga and Batangas.&lt;br/&gt; All other cities not mentioned are under Outside GMA" class="betipped" /></label><br/>    
  94.               <select name="delivery[]" id="delivery" class="required">
  95.                 <option value="">&nbsp;</option>
  96.                 <option value="gma">Greater Manila Area(GMA)</option>
  97.                 <option value="outside">Outside of GMA</option>           
  98.               </select><br/>
  99.       <label for="mortgator" id="lblmortgator" style="display:none;">Mortgator:</label><br/>
  100.           <select name="mortgator[]" id="mortgator" style="display:none;">
  101.           <option value="">Select a Mortgator</option>
  102.           </select><br/>                   
  103.     </span>
  104.     <span id="insurance" class="step">
  105.     <span class="title">Step 3 - Select an Insurance</span><br/>
  106.         <span id="selinsurance"></span><br/>
  107.         <input type="button" class="addcar" value="click here to add more vehicle"/><br/>
  108.         Once you clicked it, a new form will be added on the next page<br/>
  109.         Do note that you cannot remove the form once you added it, <br/>
  110.         so please finalize your thought before adding a new vehicle.<br/>
  111.         <span id="msgaddcar"></span>
  112.         </span>
  113.     </span>
  114.     <span id="review" class="step submit_step">
  115.         <span class="title">Last step - Username</span><br />
  116.         <label for="username">User name</label><br />
  117.         <input class="" name="username" id="username" /><br />
  118.         <label for="password">Password</label><br />
  119.         <input class="" name="password" id="password" type="password" /><br />
  120.         <label for="retypePassword">Retype password</label><br />
  121.         <input class="" name="retypePassword" id="retypePassword" type="password" /><br />
  122.         </span>
  123.         </div>
  124.         <div id="frmNavigation">                            
  125.             <input class="navigation_button" id="back" value="Back" type="reset" />
  126.             <input class="navigation_button" id="next" value="Next" type="submit" />
  127.         </div>
  128.     </form>
  129.     <hr />
  130.    
  131.     <p id="data"></p>
  132. </div>